<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{scenery.name}}</block>
		</cu-custom>
		
		<view v-if="isInit">
			
			<!-- 内容 begin -->
			<view class="cu-card case">
				
				<!-- 景点简介 begin -->
				<view class="cu-item shadow padding-bottom-xs" style="margin-bottom:5px">	
								
					<!-- 图片 begin -->
					<view class="image">
						<image v-if="scenery.images.length==1" @tap="goImages" :data-url="scenery.img" :src="scenery.img" mode="aspectFill" style="height: 30vh;" class="radius"></image>
						<swiper v-else class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
						 :autoplay="true" interval="5000" duration="500">
							<swiper-item @tap="goImages" :data-index="index" :data-url="item" v-for="(item,index) in scenery.images" :key="index">
								<image :src="item" mode="aspectFill"></image>
							</swiper-item>
						</swiper>
												
						<!-- 图片数 begin -->
						<view class="text-white text-bold text-cut bg-black" style="opacity:0.9; border-radius: 20%;padding:3px 9px;position:absolute;bottom:10rpx;right:20rpx;">
							<text class="margin-right-xs">
								<text class="cuIcon-picfill"></text>
							</text>
							{{scenery.images.length}}
						</view>
						<!-- 图片数 end -->
						
					</view>
					<!-- 图片 end -->
					
					<!-- 景区信息 begin -->
					<view class="cu-bar bg-white">
						<view class="padding-sm" style="padding-bottom: 0%; width: 77%;">
							<view class="text-xl text-black text-bold">{{scenery.name}}</view>							
							<!-- 简评 begin -->
							<view class="margin-top-xs text-sm padding-right-sm">
								{{scenery.shortDescr}}
							</view>
							<!-- 简评 end -->
							<view class="padding-top-xs">
								<view v-for="(item,index) in scenery.stagNameList" :key="index" :class="'margin-right-xs margin-tb-xs cu-tag radius sm light '+ item[2]">{{item[1]}}</view>
							</view>
						</view>
						<view @tap="goComment" class="margin-sm padding-tb-xs radius padding-lr-sm text-xl text-bold light bg-blue" style="margin-bottom: 0;width: 23%;">
							<view class="flex justify-center">
								<text class="text-blue">{{roundFun(scenery.score)}}</text>
								<text class="margin-left-xs text-xs">{{scenery.scoreText}}</text>
							</view>
							<view class="text-blue text-xs text-center">{{min_info.commentCount}} 评价 ></view>
						</view>
					</view>					
					<!-- 景区信息 begin -->
					
					<!-- 开放时间 begin -->
					<view class="solid-top flex margin-sm padding-top-sm" @tap="showModel=true">
						<view class="flex-sub" style="width: 50%;">
							<view class="text-sm text-bold">开放时间</view>
							<view class="text-sm text-cut">{{scenery.openingHour}}</view>
						</view>
						<view class="flex-sub justify-between flex align-center" style="width: 50%;">
							<view class="padding-left margin-left-xs" style="width: 70%;height: 100%;border-left:1px solid #eee">
								<view class="text-sm text-bold">景点信息</view>
								<view class="text-sm text-cut" v-if="info_list.length>0">{{info_list[info_list.length-1].name}}</view>
							</view>
							<view class="flex align-center" style="width: 60rpx;height: 100%;">
								<text class="text-gray cuIcon-right margin-left-xs"></text>
							</view>
						</view>
					</view>
					<!-- 开放时间 end -->
					
					<!-- 距离信息 begin -->
					<view class="solid-top flex justify-between margin-sm padding-top-sm">
						<view style="width: 65%;">
							<view class="text-sm text-bold margin-bottom-xs">距您 <text class="margin-lr-xs text-red">{{scenery.distance?scenery.distance:'未知'}}</text> 公里</view>
							<view class="text-sm" style="line-height: 160%;">{{scenery.street}}</view>
						</view>
						<view class="flex align-center justify-end" style="width: 35%;">
							<view class="flex flex-direction margin-lr-lg" v-if="scenery.mobile!=''" @tap="goPhone">
								<text class="text-green cuIcon-phone" style="font-size: 20px;"></text>
								<text class="text-green text-xs">电话</text>
							</view>	
							<view class="flex flex-direction margin-lr-sm" @tap="goMap()">
								<text class="text-blue cuIcon-global" style="font-size: 20px;"></text>
								<text class="text-blue text-xs">路线</text>
							</view>
						</view>
					</view>
					<!-- 距离信息 end -->
					
				</view>
				<!-- 景点简介 end -->
					
				<!-- 文章简介 begin -->
				<view class="cu-item shadow">
					
					<view class="padding-sm padding-bottom-xs text-bold">文章攻略</view>					
					<!-- 文章列表 begin -->
					<view class="margin-lr-xs solid-bottom padding-bottom-sm" v-if="article_list.length>0">
						<scroll-view style='white-space: nowrap;' scroll-x="true" class="flex">
							<view style="display: inline-block;" v-for="(item,index) in article_list" :key="index">
								<view class="flex padding-xs flex-direction align-start justify-between cu-avatar radius margin-xs xl img-radius" @tap="goArticle(item.id)" :style="'background-image:url('+item.img+')'">
									<view :class="'cu-tag radius sm '+ item.typeColor">{{item.typeStr}}</view>
									<view class="text-cut text-bold text-xs" style="width: 100%;">{{item.title}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 文章列表 end -->
					
					<view class="text-content text-lg margin-sm" style="line-height: 200%;">
						<rich-text :nodes="scenery.descr"></rich-text>
					</view>					
				</view>				
				<!-- 文章简介 end -->
				
				<!-- 景区商品 begin -->
				<view class="cu-item shadow" v-if="goods_list.length>0">
					
					<view class="padding-sm padding-bottom-xs text-bold">景区商品</view>
					
					<!-- 商品列表 begin -->
					<view class="margin-lr-xs padding-bottom-sm">
						<scroll-view style='white-space: nowrap;' scroll-x="true" class="flex">
							<view style="display: inline-block;" v-for="(item,index) in goods_list" :key="index">
								<view class="padding-xs cu-avatar radius margin-xs xl img-radius" @tap="goGoods(item.id)" :style="'position:relative;background-image:url('+item.img+')'">
									<view class="cu-tag bg-orange radius sm" style="position:absolute;left:10rpx;top:10rpx;">{{item.name}}</view>
									<view class="cu-tag bg-red light radius sm" style="position:absolute;right:10rpx;bottom:10rpx;">售价￥{{item.sellPrice}}元</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 文章列表 end -->
				</view>		
				<!-- 景区商品 end -->
				
				<!-- 评价部分 begin -->
				<view class="cu-item shadow" :style="'margin-bottom:'+(bottomHeight+10)+'px'">
					
					<view class="text-bold padding-sm" style="padding-bottom:0">游客评价</view>
					
					<!-- 头像部分 begin -->
					<view class="cu-chat padding-top-xs padding-bottom-xs">
						
						<view v-if="comment_list.length>0">												
							<view v-for="(item,index) in comment_list" :key="index" class="padding-sm padding-lr" :class="(index!=comment_list.length-1)?' solid-bottom':''">								
								<commentItem @viewImage="showImageWin" :item="item"></commentItem>							
							</view>							
							<view @tap="goComment" v-if="min_info.commentCount>3" class="solid-top text-gray text-center padding-sm">
								点击查看全部{{min_info.commentCount}}条评价
							</view>
							<view v-if="userinfo.isAuth&&!min_info.isComment" class="solid-top text-center padding-sm">
								<button class="cu-btn round bg-blue" @tap="goCommentSubmit">新增评价帮助其他的人</button>
							</view>
							<view v-if="!userinfo.isAuth" class="solid-top text-center padding-sm">
								<button class="cu-btn round bg-gray">注册后可评价</button>
							</view>
						</view>
						
						<view v-if="comment_list.length==0">
							<view  class="text-bold text-center padding-bottom">
								暂无评价
							</view>
							<view v-if="userinfo.isAuth" class="solid-top text-center padding-sm">
								<button class="cu-btn round bg-blue" @tap="goCommentSubmit">新增评价帮助其他的人</button>
							</view>
							<view v-if="!userinfo.isAuth" class="solid-top text-center padding-sm">
								<button class="cu-btn round bg-gray">注册后可评价</button>
							</view>
						</view>
												
					</view>
					<!-- 头像部分 end -->
					
				</view>
				<!-- 评价部分 end -->
				
			</view>
			<!-- 内容 end -->
			
			<!-- 操作条部分 begin -->
			<view class="cu-bar bg-white tabbar shop foot solids-top">
				<view class="action" style="margin-left:20rpx;width: 100rpx;" @tap="goNear()">
					<view class="cuIcon-search">
					</view>周边
				</view>								
				<button class="action" style="width: 100rpx;" open-type="share">
					<view class="cuIcon-share">
					</view>分享
				</button>
				<view v-if="userinfo.isAuth" class="action" style="width: 100rpx;" @tap="goComment">
					<view class="cuIcon-comment">
					</view>评价
				</view>
				<detailFavorite :isFavorite="min_info.isFav" :iid="id" :favCount="min_info.fav" />
				
				<view class="btn-group margin-right-sm" style="justify-content:flex-end">
					<button v-if="scenery.vrList.length>0" class="cu-btn bg-green round shadow-blur" @tap="goVr()">全景</button>
					<button class="cu-btn bg-blue round shadow-blur margin-left-lg" @tap="goMap()">导航</button>
				</view>
			</view>
			<!-- 操作条部分 end -->
						
			<!-- 景点信息 begin --> 
			<infoWin :showModel="showModel" :modelClose="true" title="景点信息" @closeWin="closeWin">
				<view slot="content" v-for="(item,index) in info_list" :key="index">
					
					<view class="solid cu-bar bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text>
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="padding-sm margin-xs text-left">
						<rich-text :nodes="item.value"></rich-text>
					</view>
					
				</view>
			</infoWin>
			<!-- 景点信息 end -->
			
			<backTop :scrollTop="scrollTop"></backTop>
			
			<imageView :title="showImage.title" :avatar="showImage.avatar" :showModel="showImage.model" :imageIndex="showImage.index" :images="showImage.images" @closeWin="closeImageWin"></imageView>
			
			<image style="display: none;" v-for="(item,index) in scenery.vrList" :key="index" :src="item.img">
			
		</view>		
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import * as util from "@/common/util.js"
	import {mapGetters} from 'vuex'	
		
	import infoWin from "@/components/info-win/info-win"
	import detailFavorite from "@/components/detail/detail-favorite.vue"
	import backTop from '@/components/back-top/back-top.vue';
	import commentItem from '@/components/comment/comment-scenery-item.vue';
	import imageView from '@/components/image-view/image-view.vue';
	
	export default {
		components:{
			infoWin,backTop,detailFavorite,commentItem,imageView
		},
		data() {
			return {
				id:-1,
				userinfo:{},
				scenery:{},
				article_list:[],
				info_list:[],
				comment_list:[],
				goods_list:[],
				min_info:{
					isFav:false,
					isComment:false,
					fav:0,
					click:0,
					commentCount:0
				},
				showModel:false,
				
				showImage:{
					model:false,
					images:[],
					index:0,
					title:"",
					avatar:""
				},
				isInit:false,
				scrollTop: 0,
				bottomHeight:this.StatusBarBottom,
				isPicView:false
			}
		},
		computed:{
			...mapGetters(['loadStoreGps']),
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow(){
			//获取评论信息
			if(this.isInit&&!this.isPicView){
				this.$api.post('/scenery/article_comment_list',{sid:this.id}).then(res => {
					this.article_list=res.data.articles
					this.comment_list=res.data.comments
				})
				
				this.$api.post('/scenery/has_comment',{sid:this.id}).then(res => {
					this.min_info.isComment=res.data
				})
			}
		},
		onLoad(option) {
			//更新类型时返回
			if(option.id){
				this.id=option.id				
			}
			this.$api.post('/scenery/detail',{id:this.id}).then(res => {
				this.scenery=res.data				
				//生成图片列表
				if(this.scenery.images!=null){
					let images=JSON.parse(this.scenery.images)
					let image_list=[]
					images.forEach((img)=>{
						image_list.push(img.url)
					})
					this.scenery.images=image_list
				}else{
					this.scenery.images=[this.scenery.img]
				}
				
				//生成标签列表
				if(this.scenery.stagNameList.length>0){
					let stagNameList=[]
					this.scenery.stagNameList.forEach((item)=>{
						stagNameList.push(item.split(":"))
					})
					this.scenery.stagNameList=stagNameList
				}
				
				//计算地理位置
				if(this.loadStoreGps.lat){
					this.scenery.distance=util.getDistance(this.loadStoreGps.lng,this.loadStoreGps.lat,this.scenery.lng,this.scenery.lat);
				}
				
				//获取其他信息
				this.$api.post('/scenery/info',{sid:this.id}).then(res => {
					let list=res.data.list
					let min=res.data.min
					this.info_list=[{name:"开放时间",value:this.scenery.openingHour},...list]
					this.min_info=min
					
					this.scenery.isComment=this.min_info.isComment
					this.$store.commit('SET_SCENERY',this.scenery)
				}).catch(error=>{
					uni.showToast({
						icon: 'none',
						title: '网络异常'
					})
				})				
				
				this.$api.post('/user/ckIsAuth').then(res => {
					this.userinfo=res.data
					this.isInit=true
				})
				
			}).catch(error=>{
				console.log(error)
				uni.showToast({
					icon: 'none',
					title: '网络异常'
				})
			})						
			//获取评论信息
			this.$api.post('/scenery/article_comment_list',{sid:this.id}).then(res => {
				this.article_list=res.data.articles
				this.comment_list=res.data.comments
			}).catch(error=>{
				uni.showToast({
					icon: 'none',
					title: '网络异常'
				})
			})
			
			//获取商品信息
			this.$api.post('/goods/list_by_scenery',{s:this.id}).then(res => {
				this.goods_list=res.data
			}).catch(error=>{
				uni.showToast({
					icon: 'none',
					title: '网络异常'
				})
			})
			
		},
		methods: {
			goArticle(id){
				uni.navigateTo({
					url:"/pages/scenery/article?id="+id
				})
			},
			goGoods(id){
				uni.navigateTo({
					url:"/pages/goods/detail?id="+id
				})
			},
			goNear(){
				uni.navigateTo({
					url:"/pages/scenery/scenery_near"
				})
			},
			goPhone(){
				wx.makePhoneCall({
				  phoneNumber: this.sceneryscenery.mobile
				})
			},
			goMap(){
				wx.openLocation({
					latitude: Number(this.scenery.lat),
					longitude: Number(this.scenery.lng),
					name: this.scenery.name,
					address: this.scenery.province +'-'+ this.scenery.city+'-' +this.scenery.area+'-' + this.scenery.name,
					scale: 28
				})
			},
			goVr(){
				uni.showLoading({
					title: '加载中'
				});
				this.$api.post('/scenery/vr_list',{sid:this.id}).then(res => {
					let vr=res.data
					let data={
						name:this.scenery.name,
						vr:vr,//全景图片
					}
					setTimeout(()=>{
						uni.hideLoading()
						uni.navigateTo({
							url:'/uni_modules/Wx-Happy-Threejs/pages/Showing_ball_page/Showing_ball_page?data='+encodeURIComponent(JSON.stringify(data))
						})
					},1000)					
				})				
			},
			goComment(){
				this.isPicView=false
				uni.navigateTo({
					url:"/pages/scenery/comment_list?id="+this.id
				})
			},
			goCommentSubmit(){
				this.isPicView=false
				uni.navigateTo({
					url:"/pages/scenery/comment_submit?id="+this.id
				})
			},
			onShareAppMessage(option){
				return {
						title:"美景:"+this.scenery.name,
						path:"/pages/scenery/detail?isShare=true&id="+this.scenery.id,
						success(res){
							uni.showToast({
								title:'分享成功'
							})
						},
						fail(res){
							uni.showToast({
								title:'分享失败',
								icon:'none'
							})
						}
					}
			},
			goImages(){
				this.isPicView=false
				uni.navigateTo({
					url:"/pages/scenery/images?id="+this.id
				})
			},
			closeWin(){
				this.showModel=false
			},
			roundFun(value) {
			  return util.roundFun(value,1);
			},
			ViewImage(e) {				
				this.showImage.images=this.scenery.images
				this.showImage.index=e.currentTarget.dataset.index
				this.showImage.model=true
				this.showImage.title=this.scenery.name
				this.showImage.avatar=this.scenery.img
			},
			closeImageWin(){
				this.showImage.model=false
			},
			showImageWin(e){
				this.showImage.images=e.images
				this.showImage.index=e.now				
				this.showImage.title=e.title
				this.showImage.avatar=e.avatar
				
				this.showImage.model=true
			}
		}
	}
</script>

<style scoped>
	.img-radius{
		width: 210rpx !important;
		border:1px solid #f0f0f0!important;
		border-radius:5%!important;
		background-size:cover!important;
	}
</style>
